<template>
  <el-button type="primary" size="small" @click="AddTracebility()">添加</el-button>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column type="index" width="55" label="序号" />
    <el-table-column prop="shoppName" label="商品名称" width="120" />
    <el-table-column prop="proBatch" label="生产批次" width="150" />
    <el-table-column prop="shelfLife" label="保质期" width="120" />
    <el-table-column prop="proLicense" label="生产许可证" width="150" />
    <el-table-column prop="manufacturers" label="生产企业" width="150" />
    <el-table-column label="信息完善度" width="120" />
    <el-table-column label="操作" width="380">
      <template v-slot="scop">
        <el-button type="primary" size="small" @click="editapp(scop.row)">编辑</el-button>
        <el-button type="danger" size="small" @click="deleteapp(scop.row)">删除</el-button>
        <el-button type="success" size="small" @click="Export(scop.row)">导出</el-button>
        <el-button type="info" size="small" @click="showDetail(scop.row)">详情</el-button>

      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="Index.Index" v-model:page-size="Index.Size" :page-sizes="[1, 3, 5, 10]"
    :background="true" layout="total, sizes, prev, pager, next, jumper" :total="Index.totalCount"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  <el-dialog v-model="table1" title="Shipping address" width="500">
    <el-form :model="form">
      <el-form-item label="溯源编号">
        <el-input v-model="form.traceabilityId" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品名称">
        <el-select v-model="form.shoppId" placeholder="请选择">
          <el-option label="兔头" value="1" />
          <el-option label="兔肉" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="生产批次">
        <el-input v-model="form.proBatch" autocomplete="off" />
      </el-form-item>
      <el-form-item label="保质期（天）">
        <el-input v-model="form.shelfLife" autocomplete="off" />
      </el-form-item>
      <el-form-item label="生产许可证">
        <el-input v-model="form.proLicense" autocomplete="off" />
      </el-form-item>
      <el-form-item label="生产企业">
        <el-input v-model="form.manufacturers" autocomplete="off" />
      </el-form-item>
      <el-form-item label="封面图">
        <el-upload class="avatar-uploader" action="https://localhost:7229/api/Tracebility/UploadFile"
          :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="form.coverPic" :src="form.coverPic" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="addapp()">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>
 



<el-dialog v-model="table2" title="Shipping address" width="500">
  <el-form :model="form1">
    <el-form-item label="溯源编号" >
      <el-input v-model="form.traceabilityId" autocomplete="off" />
    </el-form-item>
    <el-form-item label="商品名称">
      <el-select v-model="form.shoppId" placeholder="请选择">
        <el-option label="1" value="兔头" />
        <el-option label="2" value="兔肉" />
      </el-select>
    </el-form-item>
    <el-form-item label="生产批次" >
      <el-input v-model="form.proBatch" autocomplete="off" />
    </el-form-item>
    <el-form-item label="保质期（天）" >
      <el-input v-model="form.shelfLife" autocomplete="off" />
    </el-form-item>
    <el-form-item label="生产许可证" >
      <el-input v-model="form.proLicense" autocomplete="off" />
    </el-form-item>
    <el-form-item label="生产企业" >
      <el-input v-model="form.manufacturers" autocomplete="off" />
    </el-form-item> 
    <el-form-item label="封面图" >
      <el-upload
  class="avatar-uploader"
  action="https://localhost:7229/api/Tracebility/UploadFile"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"
>
  <img v-if="form.coverPic" :src="form.coverPic" class="avatar" />
  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
    </el-form-item> 
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button type="primary">
        修改
      </el-button> 
    </div>
  </template>
</el-dialog> 

</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
const tableData = ref([])
import { useRouter } from 'vue-router'
const router = useRouter();

const Index = reactive({
  Index: 1,
  Size: 2,
  totalCount: 0,
  totalPage: 0
})

onMounted(() => {
  getlist();
  shoppslist();
})

const table2 = ref(false);

const editapp = (row: any) => {
  table2.value = true;
  form.id = row.id;
  form.traceabilityId = row.traceabilityId;
  form.shoppId = row.shoppId;
  form.proBatch = row.proBatch;
  form.shelfLife = row.shelfLife;
  form.proLicense = row.proLicense;
  form.manufacturers = row.manufacturers;
  form.coverPic = row.coverPic;
}


const shopps = ref<any>([]);
const shoppslist = () => {
  axios.get('https://localhost:7229/api/Shopp/GetShopp').then(res => {
    shopps.value = res.data.data;
  })
}

// //修改
const Export = () => {
  axios.post('https://localhost:7229/api/Tracebility/UpdateHandle', form).then(res => {
    if (res.data.statusCode == 0) {
      ElMessage.success('修改成功')
      table2.value = false;
      getlist();
    } else {
      ElMessage.error('修改失败')
    }
  })
}

//详情
const showDetail = (row: any) => {
  router.push({
    name: "TracebilityDetailView",
    query: {
      id: row.traceabilityId
    }
  })
}


const getlist = () => {
  axios.get('https://localhost:7229/api/Tracebility/GetTracebility', {
    params: {
      Index: Index.Index,
      Size: Index.Size
    }
  }).then(res => {
    tableData.value = res.data.data.data;
    Index.totalCount = res.data.data.totalCount;
    Index.totalPage = res.data.data.totalPage;
  })
}
//分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  Index.Size = val;
  getlist();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  Index.Index = val;
  getlist();
}

const table1 = ref(false);

const AddTracebility = () => {
  table1.value = true;
}

const form = reactive({
  id: 0,
  traceabilityId: '',
  shoppId: null,
  proBatch: '',
  shelfLife: null,
  proLicense: '',
  manufacturers: '',
  coverPic: 'sdfasdfa',
  isDelete: false,
})
const form1 = reactive({
  id: 0,
  traceabilityId: '',
  shoppId: null,
  proBatch: '',
  shelfLife: null,
  proLicense: '',
  manufacturers: '',
  coverPic: 'sdfasdfa',
  isDelete: false,
})

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  form.coverPic = 'https://localhost:7229' + response
}
//上传
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type == 'image/jpg') {
    ElMessage.error('只能上传照片格式')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('上传照片不能大于2MB!')
    return false
  }
  return true
}
// const Export=()=>{
// axios.get('https://localhost:7227/api/Tracebility/ExportTracebility',{
//   params:{
//     file:"C:\\Users\\86137\\Desktop\\专高六主项目\\Ui\\vue3考试专用\\"+溯源信息.xlsx
//   }
// }).then(res=>{
//   if(res.data.statusCode==0){
//     ElMessage.success('导出成功')
//   }else{
//     ElMessage.error('导出失败')
//   }
// })
// }
//添加
const addapp = () => {
  axios.post('https://localhost:7229/api/Tracebility/AddTracebilityHandle', form).then(res => {
    console.log(res)
    if (res.data.statusCode == 0) {
      ElMessage.success('添加成功')
      table1.value = false;
      getlist();
    }
    else {
      ElMessage.error('添加失败')
    }
  })
}

//删除
const deleteapp = (row: any) => {
  if (confirm("确认要删除吗？")) {
    axios.post('https://localhost:7227/api/Tracebility/DeleteTracebility', row).then(res => {
      if (res.data.statusCode == 0) {
        ElMessage.success('删除成功')
        getlist();
      } else {
        ElMessage.error('删除失败')
      }
    })
  }
}


</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
